<!-- 成绩单模板-->
<template>
  <div class="contenBox">
    <!-- 头部搜索 -->
    <div class="first">
      <el-card class="box-card">
        <el-form :inline="true" :model="formSearch" class="demo-form-inline">
            <el-form-item label="标准名称">
                <el-input v-model="formSearch.user" placeholder="请输入标准名称"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" size="small" @click="search">
                    <span class="icon iconfont icon-chaxun" style="font-size:12px;font-weight:bold;">查询</span>
                </el-button>
                <el-button type="primary" size="small" @click="reset" icon="el-icon-refresh">重置</el-button>
            </el-form-item>
        </el-form>
      </el-card>
    </div>
    <!-- 列表栏 -->
    <div class="list">
      <div style="line-height: 80px; margin-left: 10px">
        <el-button
          type="primary"
          style="background: #5ca5d2; border: none"
          @click="open = true"
        >
           <span class="icon iconfont icon-tianjia" style="font-size:14px;">新增</span>
          </el-button
        >
        <el-button
          type="primary"
          style="background: #5ca5d2; border: none"
        >
           <span class="icon iconfont icon-dayin" style="font-size:14px;">批量打印</span>
          </el-button
        >
        <el-button type="danger" style="background: #f1818d; border: none" disabled>
           <span class="icon iconfont icon-shanchu" style="font-size:14px;color:white;">批量删除</span>
          </el-button
        >
      </div>
    </div>
    <!-- 表格-->
    <div class="table">
         <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55"> </el-table-column>
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop="name" label="模板名称"> </el-table-column>
            <el-table-column prop="createBy" label="创建时间"></el-table-column>
            <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                    <el-button type="text" size="small" @click="edit(scope.row)">
                        <span class="icon iconfont icon-bianji"></span>
                    </el-button>
                    <el-button type="text" size="small">
                        <span class="icon iconfont icon-shanchu"></span>
                    </el-button>
                    <el-button type="text" size="small" @click="print(scope.row.id)">
                        <span class="icon iconfont icon-dayin" ></span>
                    </el-button>
                </template>
            </el-table-column>
        </el-table>
    </div>
    <!-- 分页-->
    <div class="page">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryParams.pageNum"
            :page-sizes="[10, 15, 20, 25]"
            :page-size="queryParams.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
    </div>
    <!-- 新增-->
    <div class="dialog">
        <el-dialog
            title="添加"
            :visible.sync="open"
            :before-close="handleClose"
            width="60%"
            center>
            <span>
                <el-form ref="form" :model="form" label-width="80px">
                    <el-form-item label="姓名">
                        <el-input v-model="form.userName"></el-input>
                    </el-form-item>
                    <el-form-item label="学院">
                        <el-input v-model="form.college"></el-input>
                    </el-form-item>
                    <el-form-item label="专业">
                        <el-input v-model="form.major"></el-input>
                    </el-form-item>
                    <el-form-item label="班级">
                        <el-input v-model="form.class"></el-input>
                    </el-form-item>
                    <el-form-item label="评分等级">
                        <el-table
                          :data="form.tableDatas"
                          border
                          style="width: 100%">
                          <el-table-column
                            label="科目">
                            <template slot-scope='scope'>
                                <el-input type='text' v-model='scope.row.subject'></el-input>
                            </template>
                          </el-table-column>
                          <el-table-column
                            label="分数">
                              <template slot-scope='scope'>
                                  <el-input type='text' v-model='scope.row.fraction'></el-input>
                            </template>
                          </el-table-column>
                          <el-table-column
                            label="评价">
                              <template slot-scope='scope'>
                                  <el-input type='text' v-model='scope.row.evaluate'></el-input>
                            </template>
                          </el-table-column>
                          <el-table-column
                            label="是否补考">
                              <template slot-scope='scope'>
                                  <el-input type='text' v-model='scope.row.exam'></el-input>
                            </template>
                          </el-table-column>
                        </el-table>
                        <el-button type="danger" icon="el-icon-plus" circle size="mini" @click="tianjia" class="btn"></el-button>
                    </el-form-item>
                </el-form>
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="open = false">取 消</el-button>
                <el-button type="primary" @click="addSubmit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
    <!-- 修改-->
    <div class="dialog">
        <el-dialog
            title="编辑"
            :visible.sync="open2"
            :before-close="handleClose"
            center>
            <span>
                <el-form ref="form" :model="form2" label-width="80px">
                    <el-form-item label="姓名">
                        <el-input v-model="form2.userName"></el-input>
                    </el-form-item>
                    <el-form-item label="学院">
                        <el-input v-model="form2.college"></el-input>
                    </el-form-item>
                    <el-form-item label="专业">
                        <el-input v-model="form2.major"></el-input>
                    </el-form-item>
                    <el-form-item label="班级">
                        <el-input v-model="form2.class"></el-input>
                    </el-form-item>
                    <el-form-item label="评分等级">
                        <el-table
                          :data="form2.tableDatas"
                          border
                          style="width: 100%">
                          <el-table-column
                            label="科目">
                            <template slot-scope='scope'>
                                <el-input type='text' v-model='scope.row.subject'></el-input>
                            </template>
                          </el-table-column>
                          <el-table-column
                            label="分数">
                              <template slot-scope='scope'>
                                  <el-input type='text' v-model='scope.row.fraction'></el-input>
                            </template>
                          </el-table-column>
                          <el-table-column
                            label="评价">
                              <template slot-scope='scope'>
                                  <el-input type='text' v-model='scope.row.evaluate'></el-input>
                            </template>
                          </el-table-column>
                          <el-table-column
                            label="是否补考">
                              <template slot-scope='scope'>
                                  <el-input type='text' v-model='scope.row.exam'></el-input>
                            </template>
                          </el-table-column>
                        </el-table>
                        <el-button type="danger" icon="el-icon-plus" circle size="mini" @click="tianjia" class="btn"></el-button>
                    </el-form-item>
                </el-form>
            </span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="open2 = false">取 消</el-button>
                <el-button type="primary" @click="submitEdit">确 定</el-button>
            </span>
        </el-dialog>
    </div>
  </div>
</template>
<script>
import { getClassifyTreeListApi } from "@/api/basics/classify";
export default {
  data() {
    return {
      //搜索框数据
      formSearch: {
        user: "",
        region: "",
        status: "",
        timer: ""
      },
      option: [],
      //表格
      tableData: [
        {
          date: "2016-05-03",
          status: 0,
          name: "考试类型",
          createBy: new Date().toLocaleDateString()
        },
        {
          date: "2016-05-03",
          status: 1,
          name: "考试类型",
          createBy: new Date().toLocaleDateString()
        }
      ],
      //分页
      queryParams: {
        pageNum: 1,
        pageSize: 10
      },
      //总条数
      total: 0,
      //添加弹出框
      open: false,
      //修改弹框
      open2: false,
      //添加
      form: {
        tableDatas: []
      },
      //修改
      form2: {
        tableDatas: []
      },
      //搜索的时间
      createTime: "",
      date: false,
      list: []
    };
  },
  mounted() {
    this.getClassifyTreeList();
  },
  methods: {
    // 获取 左侧树 列表
    getClassifyTreeList() {
      getClassifyTreeListApi().then(res => {
        if (res.code === 200) {
          // console.log(res,'学生成绩---------------');
          this.option = res.data[1].children;
        }
      });
    },
    handleClose(done) {
      done();
      this.form = {};
      this.form2 = {};
    },
    //新增添加表格数据
    tianjia() {
      console.log(1234);
      this.form.tableDatas.push({
        subject: "",
        fraction: "",
        exam: "",
        evaluate: ""
      });
      console.log(this.list);
    },
    //搜索
    search() {},
    //重置
    reset() {
      this.formSearch = {};
    },
    //表格全选功能
    handleSelectionChange(val) {
      console.log(val);
    },
    //分页
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    //修改
    edit(item) {
      this.open2 = true;
      console.log(item);
    },
    submitEdit() {},
    //添加
    addSubmit() {
      console.log(this.form);
    },
    // 选择时间
    selectDate() {
      this.date = true;
    },
    // 取消选择时间
    closeSelect() {
      this.date = false;
    },
    //打印  点击时调用模板的接口
    print(id) {
      this.$router.push({
        path: `/Achievement/Printdetail/${id}`
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.contenBox {
  width: 104%;
  height: 100%;
  background-color: #f3f2f7;
  box-sizing: border-box;
}
.first {
  display: flex;
  width: 94%;
}
.box-card {
  width: 100%;
  .el-input {
    width: 140px;
  }
  .el-select {
    width: 200px;
  }
}
.list {
  width: 93%;
  display: flex;
  justify-content: flex-end;
}
.table {
  width: 95%;
  padding-right: 15px;
}
.page {
  width: 94%;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}
.dialog {
  .btn {
    position: absolute;
    top: 0;
    right: -14%;
  }
  ::v-deep .el-dialog {
    max-width: 750px;
    min-width: 500px;
    min-height: 426px;
    border-radius: 10px;
    background-color: #f9f9f9;
  }

  ::v-deep .el-dialog__header {
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background-color: #4895db;
    padding: 0;
    border-radius: 10px 10px 0 0;

    span {
      font-size: 16px;
      color: #fff;
    }
  }

  ::v-deep .el-dialog__headerbtn {
    top: 15px;
  }

  ::v-deep .el-dialog__headerbtn .el-dialog__close {
    color: #fff;
    font-size: 18px;
  }

  ::v-deep .el-dialog--center .el-dialog__body {
    text-align: initial;
    padding: 100px 120px;
    display: flex;
    justify-content: center;
  }

  ::v-deep .el-input__inner {
    height: 30px;
    line-height: 30px;
  }

  ::v-deep .el-form-item__content {
    width: 330px;
  }

  ::v-deep .el-dialog__footer {
    padding: 10px 20px 50px;
  }

  ::v-deep .el-button--default {
    width: 130px;
    border-radius: 20px;
    background-color: #f0f0f0;
    color: #aaaaaa;
    border: none;
  }

  ::v-deep .el-button + .el-button {
    width: 130px;
    border-radius: 20px;
    margin-left: 50px;
    background-color: #4895db;
    border-color: #4895db;
  }
}
</style>
